<template>
	<view class="fabu-container tn-padding">
		<view class="view-item tn-margin-bottom-sm">
				<view class="tn-float-left tn-padding-right left-view">
					<text class="tn-color-red tn-padding-right-sm">*</text>
					<text>任务标题</text>
				</view>
				<view class="tn-float-left right-view">
					<tn-input class="mingc-inp" v-model="renwutitle" placeholder="请输入任务标题" type="text" :height="60" :border="true" />
				</view>
		</view>
		
		<view class="tn-margin-bottom-sm">
			<view class=" tn-padding-right tn-margin-bottom-sm left-view">
				<text class="tn-color-red tn-padding-right-sm">*</text>
				<text>任务介绍</text>
			</view>
			<view class="textarea-view">
				<tn-input type="textarea" placeholder="请输入文本" v-model="introcontent" :height="100"></tn-input>
			</view>
		</view>
		
		<view class="tn-padding-sm tn-margin-bottom-sm">
			<text class="tn-icon-camera" style="font-size: 70rpx;" @click="getLocalImg"></text>
			<!-- <text class="empty-text"></text>
			<text class="tn-icon-live-stream" style="font-size: 70rpx;" @click="getLocalVideo"></text> -->
		</view>
		
		<view class="tn-margin-bottom-sm blogger__item">
			<view class="imgs-content-view tn-padding-left-sm">
							  <view v-for="(item,index) in filePathList" :key="index" class="tn-image-upload__item">
							    <image class="tn-image-upload__item__image" :src="item" mode="aspectFill" @click="showImage(item)"></image>
							  	<text class="tn-icon-close" @click="deletePhoto(item, index)"></text>
							  </view>
			</view>
		</view>
		<view class="view-item tn-margin-bottom-sm">
				<view class="tn-float-left tn-padding-right left-view">
					<text class="tn-color-red tn-padding-right-sm">*</text>
					<text>发布班级</text>
				</view>
				<view class="cts-right-view">
					<!-- <text @click="showbanjixuanze = true">选择班级<text class="empty-text"></text><text>></text></text> -->
					<custom-tree-select class="cts-view" mutiple :choseParent="false" :listData="banjilist" v-model="selectedArr" dataLabel="name" dataValue="id" />
				</view>
		</view>
		<!-- <view class="view-item tn-margin-bottom-sm">
			
			<view class="yixuanbanji-view" v-if="yixuanbanji.length">
				<text v-for="(item, index) in yixuanbanji" :key="index">{{item}}</text>
			</view>
		</view> -->
		<view class="view-item tn-margin-bottom-sm">
				<view class="tn-float-left tn-padding-right left-view">
					<text>打卡天数</text>
				</view>
				<view class="tn-float-right right-color">
					<text @click="choosetianshu">{{dakatianshu}}天<text class="empty-text"></text><text>></text></text>
				</view>
		</view>
		<view class="view-item tn-margin-bottom-sm">
				<view class="tn-float-left tn-padding-right left-view">
					<text>开始时间</text>
				</view>
				<view class="tn-float-right right-color">
					<text @click="chooseTime(1)"><text v-if="kaishiriqi">{{kaishiriqi}}</text><text v-else>选择时间</text> <text class="empty-text"></text><text>></text></text>
				</view>
		</view>
		<view class="view-item tn-margin-bottom-sm">
				<view class="tn-float-left tn-padding-right left-view">
					<text>结束时间</text>
				</view>
				<view class="tn-float-right right-color">
					<text @click="chooseTime(2)"><text v-if="jieshuriqi">{{jieshuriqi}}</text><text v-else>选择时间</text><text class="empty-text"></text><text>></text></text>
				</view>
		</view>
		<view class="view-item tn-margin-bottom-sm">
				<view class="tn-float-left tn-padding-right left-view" style="width: 160px">
					<text>每日打卡截止时间</text>
				</view>
				<view class="tn-float-right right-color">
					<text @click="showjiezhipocker = true"><text v-if="jiezhishijian">{{jiezhishijian}}</text><text v-else>选择时间</text><text class="empty-text"></text><text>></text></text>
				</view>
		</view>
		<view class="tn-padding-sm bottom-view">
				<tn-button width="100%" backgroundColor="#79CF67" fontColor="#fff" @click="uploadImgs">{{zaicifabu?'再次发布':'发布'}}</tn-button>
		</view>
		<tn-select
		  v-model="showtianshuselect"
		  mode="single"
		  title="请选择天数"
		  :list="tianshulist"
		  :maskCloseable="true"
		  @confirm="confirmtianshuSelect"
		>
		</tn-select>
		<tn-select v-model="showbanjixuanze" mode="multi-auto" :list="banjilist" @confirm="confirmbanji"></tn-select>
		<tn-picker
		  v-model="showriqipocker"
		  mode="time"
		  :showTimeTag="true"
		  :maskCloseable="true"
		  @confirm="confirmTimePicker"
		  :params="params"
		>
		</tn-picker>
		<tn-picker
		  v-model="showjiezhipocker"
		  mode="time"
		  :showTimeTag="true"
		  :maskCloseable="true"
		  @confirm="confirmjiezhiPicker"
		  :params="jiezhiparams"
		>
		</tn-picker>
		
		<view v-if="previewImg" class="image-check-view tn-flex tn-flex-col-center" @click="previewImg=''">
			<image class="tn-width-full" :src="previewImg" mode="widthFix"></image>
			<text class="tn-icon-close" @click="previewImg=''"></text>
		</view>
		<tn-toast
		  ref="toast"
		></tn-toast>
	</view>
</template>

<script>
	import customTreeSelect from '../../uni_modules/custom-tree-select/components/custom-tree-select/custom-tree-select.vue'
	export default {
		components:{customTreeSelect},
		name: 'youerruyuan',
		data(){
			return {
				renwutitle: '打卡任务',
				introcontent: '',
				imageTitle: '',
				fileList: [],
				filePathList: [],
				dakatianshu: 1,
				showtianshuselect: false,
				previewImg: '',
				tianshulist: [
					{ value: 1, label: '1天' },
					{ value: 2, label: '2天' },
					{ value: 3, label: '3天' },
					{ value: 4, label: '4天' },
					{ value: 5, label: '5天' },
				],
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
				},
				jiezhiparams:{
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
				},
				showbanjixuanze: false,
				yixuanbanji: ['洗洗班'],
				banjilist: [
				],
				showriqipocker: false,
				kaishiriqi:'',
				jieshuriqi:'',
				jiezhishijian: '23:59',
				chooseTimeType: 1,
				showjiezhipocker: false,
				listData: [],
				selectedArr: [],
				detailId: '',
				zaicifabu: false,
				classId: ''
			}
		},
		onLoad:function(options){
		    console.log(options.id);   // 2
			this.detailId = options.id
			this.zaicifabu = options.zaicifabu?true:false
		},
		onShow() {
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
			this.getrenwuDetail()
		},
		mounted() {
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
			this.getbanjiFenlei()
			this.getDay(new Date())
		},
		methods: {
			
			getrenwuDetail(){
				if(!this.detailId){
					return
				}
				this.request({
					url: '/ParentChildTasks/Preview',
					method: 'get',
					params: {
						id: this.detailId
					},
				}).then(res => {
					if(res.code == 200){
						let obj = res.data.parentChildTasksInfo
						this.renwutitle = obj.title;
						this.introcontent = obj.taskIntroduction;
						this.selectedArr = [obj.classId]
						this.dakatianshu = obj.clockInDays;
						this.kaishiriqi = obj.startDate;
						this.jieshuriqi = obj.endDate;
						this.jiezhishijian = obj.dailyClockInDeadline
					}
				})
			},
			showImage(item){
				console.log(item)
				this.previewImg = item;
			},
			getDay(dd){
				let y = dd.getFullYear();
			　　let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
			　　let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				this.kaishiriqi = y+'-'+m+'-'+d;
				this.getNextDate(1)
			},
			getNextDate(day) { 
				let date = this.kaishiriqi;
			　　var dd = new Date(date);
			　　dd.setDate(dd.getDate() + day);
			　　var y = dd.getFullYear();
			　　var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
			　　var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
			console.log(day, '---------',dd.getDate())
			　　this.jieshuriqi = y + "-" + m + "-" + d;
			},
			getbanjiFenlei(){
				this.request({
					url: '/SysClasses/List',
					method: 'get',
					params: {
						isArchived: false
					},
				}).then(res => {
					if(res.code == 200){
						this.banjilist = res.data.map(item => {
							item.children = []
							return item
						});
					}
				})
			},
			// showImage(item,image_item){
				
			// 	this.previewImg = image_item.src;
			// },
			choosetianshu(){
				this.showtianshuselect = true
			},
			confirmtianshuSelect(val){
				this.dakatianshu = val[0].value
				this.getNextDate(this.dakatianshu)
			},
			confirmbanji(val){
				console.log(val)
			},
			confirmTimePicker(val){
				this.showriqipocker = false;
				if(!val){return}
				if(this.chooseTimeType == 1){
					this.kaishiriqi = val.year + '-' + val.month + '-' + val.day+' '+val.hour+':'+val.minute
				}else{
					this.jieshuriqi = val.year + '-' + val.month + '-' + val.day+' '+val.hour+':'+val.minute
				}
			},
			confirmjiezhiPicker(val){
				this.showjiezhipocker = false;
				if(!val){return}
				this.jiezhishijian = val.hour+':'+val.minute
			},
			chooseTime(t){
				this.chooseTimeType = t
				this.showriqipocker = true
			},
			getLocalImg(){
					if(this.fileList.length >= 9){
						return;
					}
					wx.chooseImage({
					   success: chooseResult => {
							chooseResult.tempFiles.forEach((item, index) => {
								if(this.fileList.length < 9){
									this.fileList.push(item)
									this.filePathList.push(chooseResult.tempFilePaths[index])
								}
							})
						}
					})
			},
			getLocalVideo(){
					if(this.fileList.length >= 9){
						return;
					}
					let that = this
					wx.chooseVideo({
					  sourceType: ['album'],
				      maxDuration: 60,
				      camera: 'back',
				      success: function(res) {
						that.fileList.push(res.tempFile)
						that.filePathList.push(res.tempFilePath)
				      }
				    })
			},
			deletePhoto(item, index){
				this.fileList.splice(index, 1)
				this.filePathList.splice(index, 1)
			},
			async uploadImgs(){
				
				if(!this.renwutitle){
					this.$refs.toast.show({
					  title: '',
					  content: '请填写任务标题',
					  icon: 'fail',
					  image: '',
					  duration: 1500
					})
					return
				}
				if(!this.introcontent){
					this.$refs.toast.show({
					  title: '',
					  content: '请填写任务介绍',
					  icon: 'fail',
					  image: '',
					  duration: 1500
					})
					return
				}
				
				let cresult = await this.contentCheck.checkRequest(2, this.renwutitle + this.introcontent)
				if(!cresult){
					return
				}
				// if(!this.fileList.length){
				// 	this.$refs.toast.show({
				// 	  title: '',
				// 	  content: '请上传任务图片',
				// 	  icon: 'fail',
				// 	  image: '',
				// 	  duration: 1500
				// 	})
				// 	return
				// }
				if(!this.selectedArr.length){
					this.$refs.toast.show({
					  title: '',
					  content: '请选择发布班级',
					  icon: 'fail',
					  image: '',
					  duration: 1500
					})
					return
				}
				 let that = this;
				 let imgIdArr = [];
				 if(!this.fileList.length){
					 this.fabuFunction([])
					 return;
				 }
				this.fileList.forEach(item => {
					this.uploadPhoto(item, item.path, async (resData) => {
						if(resData.code == 200){
							
							let _url = this.imageTitle + resData.data
							let cresult = await this.contentCheck.mediaCheck(2, _url, 2)
							if(!cresult){
								return
							}
							imgIdArr.push(resData.data)
							if(imgIdArr.length == this.fileList.length){
								that.fabuFunction(imgIdArr)
							}
						}
					})
				})
			},
			uploadPhoto(file, filePath,callBack){
				uni.uploadFile({
				    url: this.config.apiUri + '/sysFileInfo/UploadFileInfo',
					// files: arr,
					name: 'file',
					file: file,
					filePath: filePath,
				    header: {
						'Authorization': 'Bearer '+ uni.getStorageSync('token')
				    },
				    success: (res) => {
						let resData = JSON.parse(res.data)
						if(resData.code == 200){
							if(callBack){
								callBack(resData);
							}
						}else{
							  this.$refs.toast.show({
							    title: '',
							    content: resData.message || '错误',
							    icon: 'fail',
							    image: '',
							    duration: 1500
							  })
						}
				    },
					fail:(err) => {
						console.log(err)
					}
				});
			},
			fabuFunction(imgIdArr){
				console.log(this.selectedArr)
				if(this.detailId && !this.zaicifabu){
					this.xiugaifunction(imgIdArr)
					return
				}
				
				let postObj = {
					taskInfo:{
						"title": this.renwutitle,
						"taskIntroduction": this.introcontent,
						"clockInDays": this.dakatianshu,
						"startDate": this.kaishiriqi,
						"endDate": this.jieshuriqi,
						"dailyClockInDeadline": this.jiezhishijian,
						"imageList": imgIdArr
					},
					classIdList:this.selectedArr
				}
				this.request({
					url: '/ParentChildTasks/Add',
					method: 'post',
					params: postObj
				}).then(res => {
					if(res.code == 200){
						this.$refs.toast.show({
							title: '',
							content: '发布成功',
							icon: 'success',
							image: '',
							duration: 1500
						})		  
					}else{
						this.$refs.toast.show({
							title: '',
							content: res.message,
							icon: 'fail',
							image: '',
							duration: 1500
						})
					}
				})
			},
			xiugaifunction(imgIdArr){
				this.classId = this.selectedArr[0]
				let postObj = {
						id: this.detailId,
						"title": this.renwutitle,
						"taskIntroduction": this.introcontent,
						"clockInDays": this.dakatianshu,
						"classId": this.classId,
						"startDate": this.kaishiriqi,
						"endDate": this.jieshuriqi,
						"dailyClockInDeadline": this.jiezhishijian,
						"imageList": imgIdArr
				}
				this.request({
					url: '/ParentChildTasks/Edit',
					method: 'post',
					params: postObj
				}).then(res => {
					if(res.code == 200){
						this.$refs.toast.show({
							title: '',
							content: '发布成功',
							icon: 'success',
							image: '',
							duration: 1500
						})		  
					}else{
						this.$refs.toast.show({
							title: '',
							content: res.message,
							icon: 'fail',
							image: '',
							duration: 1500
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fabu-container{
		min-height: 100vh;
		background-color: rgba(245, 245, 245, 1);
		overflow-y: auto;
	}
	
	.view-item{
		min-height: 70rpx;
		line-height: 70rpx;
		overflow: hidden;
	}
	
	.right-view{
		width: calc(100% - 200rpx);
		background-color: #fff;
	}
	.left-view{
		width: 200rpx;
	}
	.title-inp{
		width: calc(100% - 80px);
		float: right;
		background-color: #ffffff;
	}
	.biaoti-txt{
		line-height: 75rpx;
	}
	.textarea-view{
		background-color: #fff;
		border: 1px solid #ddd;
		padding: 10rpx 20rpx;
		min-height: 160rpx;
	}
	.empty-text{
		display: inline-block;
		width: 20rpx;
	}
	
	.image-check-view{
			  position: fixed;
			  top: 0;
			  left: 0;
			  right: 0;
			  bottom: 0;
			  z-index: 2;
			  background-color: rgba(1, 1, 1, 1);
			  .tn-icon-close{
				  position: absolute;
				  top: 10px;
				  right: 10px;
				  font-size: 36rpx;
				  z-index: 888;
			  }
	}
.imgs-content-view{
	  overflow: hidden;
}
  .tn-image-upload__item {
    width: 100%;
    height: 180rpx;
    border-radius: 30rpx;
    margin-bottom: 20rpx;
		  float: left;
    &__image {
      width: 100%;
      height: 180rpx;
      border-radius: 30rpx;
    }
  }
  .tn-image-upload__item {
	    width: 160rpx;
	    height: 160rpx;
	    border-radius: 30rpx;
	    margin-bottom: 20rpx;
		margin-right: 20rpx;
		position: relative;
	    &__image {
	      width: 100%;
	      height: 100%;
	      border-radius: 30rpx;
	    }
		  .tn-icon-close{
			  position: absolute;
			  top: 10rpx;
			  right: 10rpx;
			  font-size: 30rpx;
		  }
	  }
	  .yixuanbanji-view{
		  width: 100%;
	  }
	  .cts-right-view{
		  width: calc(100% - 200rpx);
		  float: right;
		  line-height: 26rpx;
	  }
	  .cts-view{
		  width: 100%;
	  }
	.right-color{
		color: #777777;
		font-size: 25rpx;
	}
</style>
<style lang="scss">
	
	.cts-right-view .custom-tree-select-content .select-list .left .select-item .name{
			  font-size: 12px !important;
			  color: #555555 !important;
	}
	.cts-right-view .custom-tree-select-content .select-list .left .select-item{
		
				  font-size: 12px !important;
				  color: #555555 !important;
	}
</style>